<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>CSS3 | 邢万江</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="渐变线性渐变 linear-gradient指沿着某条直线朝一个方向产生的渐变效果。  线性渐变的核心：  渐变方向 颜色 渐变范围  1234567891011121314&#x2F;* 注意：渐变实际上相当与一张图片，因为需要加给background-image才会生效 *&#x2F;&#x2F;* 渐变的核心：渐变方向，渐变颜色, 渐变范围 *&#x2F;&#x2F;* background-image: linear-gradient(">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS3">
<meta property="og:url" content="http://yoursite.com/2020/05/19/CSS3/index.html">
<meta property="og:site_name" content="邢万江">
<meta property="og:description" content="渐变线性渐变 linear-gradient指沿着某条直线朝一个方向产生的渐变效果。  线性渐变的核心：  渐变方向 颜色 渐变范围  1234567891011121314&#x2F;* 注意：渐变实际上相当与一张图片，因为需要加给background-image才会生效 *&#x2F;&#x2F;* 渐变的核心：渐变方向，渐变颜色, 渐变范围 *&#x2F;&#x2F;* background-image: linear-gradient(">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="http://yoursite.com/2020/05/19/CSS3/images/zbz.png">
<meta property="og:image" content="http://yoursite.com/2020/05/19/CSS3/images/per1.jpg">
<meta property="og:image" content="http://yoursite.com/2020/05/19/CSS3/images/per2.jpg">
<meta property="article:published_time" content="2020-05-19T00:58:25.679Z">
<meta property="article:modified_time" content="2020-05-19T01:07:35.848Z">
<meta property="article:author" content="程序猿">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://yoursite.com/2020/05/19/CSS3/images/zbz.png">
  
    <link rel="alternative" href="/atom.xml" title="邢万江" type="application/atom+xml">
  
  
    <link rel="icon" href="/http://oayoilchh.bkt.clouddn.com/2016/07/27/18:05:26%20">
  
  
      
<link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">

  
  
<link rel="stylesheet" href="/css/style.css">

  <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
  
      <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  
  <!-- 加载特效 -->
    <script src="/js/pace.js"></script>
    <link href="/css/pace/pace-theme-flash.css" rel="stylesheet" />
  <script>
      var yiliaConfig = {
          rootUrl: '/',
          fancybox: true,
          animate: true,
          isHome: false,
          isPost: true,
          isArchive: false,
          isTag: false,
          isCategory: false,
          open_in_new: false
      }
  </script>
<meta name="generator" content="Hexo 4.2.1"></head>
<body>
  <div id="container">
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
    <header id="header" class="inner">
        <script src="http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
        <a href="/" class="profilepic">
            
            <img lazy-src="img/head.jpg" class="js-avatar">
            
        </a>
        <hgroup>
          <h1 class="header-author"><a href="/">程序猿</a></h1>
        </hgroup>
        
        
            <form>
                <input type="text" class="st-default-search-input search" id="local-search-input" placeholder="搜索一下" autocomplete="off">
            </form>
            <div id="local-search-result"></div>
        
        
            <script type="text/javascript">
                (function() {
                    'use strict';
                    function getMatchData(keyword, data) {
                        var matchData = [];
                        for(var i =0;i<data.length;i++){
                            if(data[i].title.toLowerCase().indexOf(keyword)>=0) 
                                matchData.push(data[i])
                        }
                        return matchData;
                    }
                    var $input = $('#local-search-input');
                    var $resultContent = $('#local-search-result');
                    $input.keyup(function(){
                        $.ajax({
                            url: '/search.json',
                            dataType: "json",
                            success: function( json ) {
                                var str='<ul class=\"search-result-list\">';                
                                var keyword = $input.val().trim().toLowerCase();
                                $resultContent.innerHTML = "";
                                if ($input.val().trim().length <= 0) {
                                    $resultContent.empty();
                                    $('#switch-area').show();
                                    return;
                                }
                                var results = getMatchData(keyword, json);
                                if(results.length === 0){
                                    $resultContent.empty();
                                    $('#switch-area').show();
                                    return;
                                } 
                                for(var i =0; i<results.length; i++){
                                    str += "<li><a href='"+ results[i].url +"' class='search-result-title'>"+ results[i].title +"</a></li>";
                                }
                                str += "</ul>";
                                $resultContent.empty();
                                $resultContent.append(str);
                                $('#switch-area').hide();
                            }
                        });
                    });
                })();
            </script>
        
        
            <div id="switch-btn" class="switch-btn">
                <div class="icon">
                    <div class="icon-ctn">
                        <div class="icon-wrap icon-house" data-idx="0">
                            <div class="birdhouse"></div>
                            <div class="birdhouse_holes"></div>
                        </div>
                        <div class="icon-wrap icon-ribbon hide" data-idx="1">
                            <div class="ribbon"></div>
                        </div>
                        
                        <div class="icon-wrap icon-link hide" data-idx="2">
                            <div class="loopback_l"></div>
                            <div class="loopback_r"></div>
                        </div>
                        
                        
                        <div class="icon-wrap icon-me hide" data-idx="3">
                            <div class="user"></div>
                            <div class="shoulder"></div>
                        </div>
                        
                    </div>
                </div>
                <div class="tips-box hide">
                    <div class="tips-arrow"></div>
                    <ul class="tips-inner">
                        <li>菜单</li>
                        <li>标签</li>
                        
                        <li>友情链接</li>
                        
                        
                        <li>关于我</li>
                        
                    </ul>
                </div>
            </div>
        
        <div id="switch-area" class="switch-area">
            <div class="switch-wrap">
                <section class="switch-part switch-part1">
                    <nav class="header-menu">
                        <ul>
                        
                            <li><a  href="http://bestwing.me" target="_blank" rel="noopener">博客首页</a></li>
                        
                            <li><a  href="/archives">文章归档</a></li>
                        
                            <li><a  href="/CTFStudy">学习导航</a></li>
                        
                            <li><a  href="/PWNABLE">PWNABLE</a></li>
                        
                            <li><a  href="/resume">个人简历</a></li>
                        
                        </ul>
                    </nav>
                    <nav class="header-nav">
                        <ul class="social">
                            
                                <a class="fl mail"  target="_blank" href="/760996296@qq.com" title="mail">mail</a>
                            
                                <a class="fl github"  target="_blank" href="https://github.com/xingwanjiang" title="github">github</a>
                            
                                <a class="fl zhihu"  target="_blank" href="https://www.baidu.com/people/Swings" title="zhihu">zhihu</a>
                            
                                <a class="fl weibo"  target="_blank" href="https://weibo.com/u/7346457923/home?wvr=5" title="weibo">weibo</a>
                            
                                <a class="fl rss"  target="_blank" href="/atom.xml" title="rss">rss</a>
                            
                        </ul>
                    </nav>
                </section>
                
                <section class="switch-part switch-part2">
                    <div class="widget tagcloud" id="js-tagcloud">
                        
                    </div>
                </section>
                
                
                <section class="switch-part switch-part3">
                    <div id="js-friends">
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://ring3.xyz/">Yllen</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://mxny.org/">麦香浓郁</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://whereisk0shl.top/">K0sh1</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.ycjcl.cc/">信鑫</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://bystudent.com/">ByStundet表哥</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="https://www.jarviswang.me/">汪神_Jarvis</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://sh3ll.me/">Chu</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="https://www.hackfun.org/">4ido10n</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.cnblogs.com/iamstudy">L3m0n</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://o0xmuhe.me/">muhe</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://blog.nuptzj.cn/">_画船听雨</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.virzz.com/index.html">Virink</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.sqlsec.com/">国光</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.bodkin.ren/">老锥</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.cizel.cn/">C1zel</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://1phan.cc">1phan</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="https://www.liuil.top/">liuil</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.cnblogs.com/Ox9A82/">Ox9A82</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://burnegg.com/">burnegg</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="https://jwrsec.cn/">jwr-sec</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://sudalover.cn/">苏打</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://blog.binklac.com">VeroFess</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.bendawang.site/">bendawang</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://weeklyalgo.codes/">hook</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.flier.net.cn/">Flier&#39;blog</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://www.mutepig.club">mutepig</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="https://blog.iret.xyz/list.aspx">Silver</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://simp1e.leanote.com/">Simple</a>
                    
                      <a target="_blank"  class="main-nav-link switch-friends-link" href="http://processor.pub/">Processor</a>
                    
                    </div>
                </section>
                
                
                
                <section class="switch-part switch-part4">
                
                    <div id="js-aboutme">一只淹死在二进制海洋里的二进制狗</div>
                </section>
                
            </div>
        </div>
    </header>
</div>

    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
      <div class="overlay">
          <div class="slider-trigger"></div>
          <h1 class="header-author js-mobile-header hide"><a href="/" title="Me">程序猿</a></h1>
      </div>
    <div class="intrude-less">
        <header id="header" class="inner">
            <a href="/" class="profilepic">
                
                    <img lazy-src="/img/head.jpg" class="js-avatar">
                
            </a>
            <hgroup>
              <h1 class="header-author"><a href="/" title="Me">程序猿</a></h1>
            </hgroup>
            
            <nav class="header-menu">
                <ul>
                
                    <li><a href="http://bestwing.me" target="_blank" rel="noopener">博客首页</a></li>
                
                    <li><a href="/archives">文章归档</a></li>
                
                    <li><a href="/CTFStudy">学习导航</a></li>
                
                    <li><a href="/PWNABLE">PWNABLE</a></li>
                
                    <li><a href="/resume">个人简历</a></li>
                
                <div class="clearfix"></div>
                </ul>
            </nav>
            <nav class="header-nav">
                <div class="social">
                    
                        <a class="mail" target="_blank" href="/760996296@qq.com" title="mail">mail</a>
                    
                        <a class="github" target="_blank" href="https://github.com/xingwanjiang" title="github">github</a>
                    
                        <a class="zhihu" target="_blank" href="https://www.baidu.com/people/Swings" title="zhihu">zhihu</a>
                    
                        <a class="weibo" target="_blank" href="https://weibo.com/u/7346457923/home?wvr=5" title="weibo">weibo</a>
                    
                        <a class="rss" target="_blank" href="/atom.xml" title="rss">rss</a>
                    
                </div>
            </nav>
        </header>                
    </div>
</nav>
      <div class="body-wrap"><article id="post-CSS3" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2020/05/19/CSS3/" class="article-date">
      <time datetime="2020-05-19T00:58:25.679Z" itemprop="datePublished">2020-05-19</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      CSS3
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        

        
        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <h1 id="渐变"><a href="#渐变" class="headerlink" title="渐变"></a>渐变</h1><h2 id="线性渐变"><a href="#线性渐变" class="headerlink" title="线性渐变"></a>线性渐变</h2><blockquote>
<p>linear-gradient指沿着某条直线朝一个方向产生的渐变效果。</p>
</blockquote>
<p>线性渐变的核心：</p>
<ul>
<li>渐变方向</li>
<li>颜色</li>
<li>渐变范围</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 注意：渐变实际上相当与一张图片，因为需要加给background-image才会生效 */</span></span><br><span class="line"><span class="comment">/* 渐变的核心：渐变方向，渐变颜色, 渐变范围 */</span></span><br><span class="line"><span class="comment">/* background-image: linear-gradient( 方向, 颜色 范围, 颜色 范围, 颜色 范围 ); */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 最简单的渐变 */</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">linear-gradient</span>(<span class="selector-tag">red</span>, <span class="selector-tag">green</span>);</span><br><span class="line"><span class="comment">/* 设定渐变的方向  */</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">linear-gradient</span>(<span class="selector-tag">to</span> <span class="selector-tag">right</span>, <span class="selector-tag">red</span>, <span class="selector-tag">green</span>);</span><br><span class="line"><span class="comment">/* 也可以设定渐变的角度  */</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">linear-gradient</span>(45<span class="selector-tag">deg</span>, <span class="selector-tag">red</span>, <span class="selector-tag">green</span>);</span><br><span class="line"><span class="comment">/* 设定渐变的范围  */</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">linear-gradient</span>(<span class="selector-tag">to</span> <span class="selector-tag">right</span>, <span class="selector-tag">red</span> 20%, <span class="selector-tag">green</span> 80%)</span><br><span class="line"><span class="comment">/* 每一个区间表示渐变颜色的范围  */</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">linear-gradient</span>(<span class="selector-tag">to</span> <span class="selector-tag">right</span>, <span class="selector-tag">red</span> 20%, <span class="selector-tag">green</span> 20%)</span><br></pre></td></tr></table></figure>

<p>【演示：渐变-线性渐变.html】</p>
<p>【演示：导航按钮.html】</p>
<p>【案例：渐变-案例-发廊效果.html】</p>
<h2 id="径向渐变"><a href="#径向渐变" class="headerlink" title="径向渐变"></a>径向渐变</h2><blockquote>
<p>radial-gradient指从一个中心点开始沿着四周产生渐变效果</p>
</blockquote>
<p>径向渐变的核心：</p>
<ul>
<li>圆的大小</li>
<li>圆心的位置</li>
<li>颜色</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*1. 最简单的渐变*/</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">radial-gradient</span>(<span class="selector-tag">red</span>, <span class="selector-tag">green</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*2. 指定圆的半径和圆心*/</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">radial-gradient</span>(200<span class="selector-tag">px</span> <span class="selector-tag">at</span> <span class="selector-tag">center</span>, <span class="selector-tag">red</span>, <span class="selector-tag">green</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*3. 指定椭圆*/</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">radial-gradient</span>(200<span class="selector-tag">px</span> 80<span class="selector-tag">px</span> <span class="selector-tag">at</span> <span class="selector-tag">center</span>, <span class="selector-tag">red</span>, <span class="selector-tag">green</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*4. 指定范围*/</span></span><br><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">radial-gradient</span>(200<span class="selector-tag">px</span> <span class="selector-tag">at</span> <span class="selector-tag">center</span>, <span class="selector-tag">green</span> 50%, <span class="selector-tag">red</span> 50%);</span><br></pre></td></tr></table></figure>

<p>【演示：径向渐变-语法.html】</p>
<p>【案例：径向渐变-立体小球.html】</p>
<h1 id="过渡"><a href="#过渡" class="headerlink" title="过渡"></a>过渡</h1><h2 id="过渡的属性"><a href="#过渡的属性" class="headerlink" title="过渡的属性"></a>过渡的属性</h2><ol>
<li>如果两个状态发生改变，没有过渡，效果是瞬间变化的</li>
<li>如果加上了过渡，那么这个过程就会有动画的效果。</li>
<li>整个状态变化的过程是由浏览器来完成的，我们只需要关注开始状态与结束状态即可。</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*transition-property：设置过渡属性</span></span><br><span class="line"><span class="comment">/*也可以是width,height*/</span></span><br><span class="line"><span class="selector-tag">transition-property</span><span class="selector-pseudo">:all</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*transition-duration:设置过渡时间*/</span></span><br><span class="line"><span class="selector-tag">transition-duration</span><span class="selector-pseudo">:1s</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*transition-delay：设置过渡延时*/</span></span><br><span class="line"><span class="selector-tag">transition-delay</span><span class="selector-pseudo">:2s</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*transition-timing-function:设置过渡的速度*/</span></span><br><span class="line"><span class="comment">/*linear，ease，ease-in，ease-out，ease-in-out， steps(10)*/</span></span><br><span class="line"><span class="selector-tag">transition-timing-function</span><span class="selector-pseudo">:linear</span>;</span><br></pre></td></tr></table></figure>

<p>【演示：过渡基本语法】</p>
<h2 id="属性合写"><a href="#属性合写" class="headerlink" title="属性合写"></a>属性合写</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 属性 时间 延时 速度 */</span></span><br><span class="line"><span class="selector-tag">transition</span>: <span class="selector-tag">width</span> 1<span class="selector-tag">s</span> 3<span class="selector-tag">s</span> <span class="selector-tag">linear</span>;</span><br></pre></td></tr></table></figure>

<p>过渡的注意点：</p>
<ul>
<li>过渡必须要有两个状态的变化。</li>
<li>过渡可以写在A状态，也可以写在B状态，但是如果写在B状态，那么回来的时候，就没有过渡效果了。</li>
</ul>
<p>【案例：手风琴效果】</p>
<h1 id="2D转换"><a href="#2D转换" class="headerlink" title="2D转换"></a>2D转换</h1><blockquote>
<p>transform: 转换，是CSS3最具颠覆性的几个特性之一，既可以用于2D转换，也可以用于3D转换。</p>
<p>transform：2D转换，元素在平面上实现移动、旋转、缩放、斜切等操作</p>
</blockquote>
<h2 id="scale缩放"><a href="#scale缩放" class="headerlink" title="scale缩放"></a>scale缩放</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">transform</span>: <span class="selector-tag">scaleX</span>(0<span class="selector-class">.5</span>);<span class="comment">/*让宽度变化*/</span></span><br><span class="line"><span class="selector-tag">transform</span>: <span class="selector-tag">scaleY</span>(0<span class="selector-class">.5</span>);<span class="comment">/*让高度变化，注意不能写多个transform，不然会覆盖。*/</span></span><br><span class="line"><span class="selector-tag">transform</span>: <span class="selector-tag">scale</span>(0<span class="selector-class">.5</span>);<span class="comment">/*让宽度和高度同时变化*/</span></span><br></pre></td></tr></table></figure>

<p>注意：</p>
<ul>
<li>scale接收的值是倍数，因此没有单位</li>
<li>scale可以是一个值，如果是一个值，不是说仅仅缩放宽度，高度也会等比例的缩放。</li>
<li>可以通过transform-origin设定旋转原点</li>
</ul>
<h2 id="translate平移"><a href="#translate平移" class="headerlink" title="translate平移"></a>translate平移</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">transform: translateX(<span class="number">100</span>px);</span><br><span class="line">transform: translateY(<span class="number">100</span>px);</span><br><span class="line">transform: translate(<span class="number">100</span>px, <span class="number">100</span>px);</span><br><span class="line">transform: translate(<span class="number">50</span>%, <span class="number">50</span>%);</span><br></pre></td></tr></table></figure>

<p>注意：</p>
<ul>
<li>translate的值可以是px，也可以是百分比，如果是百分比，那么参照的是自身的宽高。</li>
<li>translate移动的元素并不会影响其他盒子，类似于相对定位。</li>
</ul>
<h2 id="rotate旋转"><a href="#rotate旋转" class="headerlink" title="rotate旋转"></a>rotate旋转</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">transform: rotate(<span class="number">360</span>deg);<span class="comment">//旋转360度</span></span><br><span class="line">transform: rotate(<span class="number">-360</span>deg);<span class="comment">//逆时针旋转360度</span></span><br></pre></td></tr></table></figure>

<p>注意：</p>
<ul>
<li>单位是deg，角度，不是px</li>
<li>正值顺时针转，负值逆时针转</li>
<li>可以通过transition-origin设定旋转原点</li>
</ul>
<h2 id="skew斜切-变形"><a href="#skew斜切-变形" class="headerlink" title="skew斜切(变形)"></a>skew斜切(变形)</h2><blockquote>
<p>skew在实际开发中，是用的最少的一个属性。一般来说，x和y只会倾斜其中的一个</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*在水平方向倾斜30deg*/</span></span><br><span class="line">transform: skewX(<span class="number">30</span>deg);</span><br><span class="line"><span class="comment">/*在垂直方向倾斜30deg*/</span></span><br><span class="line">transform: skewY(<span class="number">30</span>deg);</span><br></pre></td></tr></table></figure>

<p>【案例：扫光效果.html】</p>
<h2 id="transform-origin转换原点"><a href="#transform-origin转换原点" class="headerlink" title="transform-origin转换原点"></a>transform-origin转换原点</h2><blockquote>
<p>通过transform-origin可以设置转换的中心原点。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">transform-origin: center center;</span><br><span class="line">transform-origin: <span class="number">40</span>px <span class="number">40</span>px;</span><br></pre></td></tr></table></figure>

<h2 id="转换合写问题"><a href="#转换合写问题" class="headerlink" title="转换合写问题"></a>转换合写问题</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">transform:translateX(<span class="number">800</span>px) scale(<span class="number">1.5</span>) rotate(<span class="number">360</span>deg) ;</span><br><span class="line"><span class="comment">//1. transform属性只能写一个，如果写了多个会覆盖</span></span><br><span class="line"><span class="comment">//2. transform属性可以连写，但是顺序对效果影响的，因为它会在第一个效果的基础上执行第二个效果，然后执行第三个效果（通常会把rotate放后面）</span></span><br><span class="line"><span class="comment">//3. 如果对transform进行过度效果的时候，初始状态和结束状态一一对应</span></span><br></pre></td></tr></table></figure>

<p>【案例：盾牌打散与合并效果.html】</p>
<h1 id="3D转换"><a href="#3D转换" class="headerlink" title="3D转换"></a>3D转换</h1><blockquote>
<p>transform:不仅可以2D转换，还可以进行3D转换。</p>
</blockquote>
<p>思考：2D与3D的区别？</p>
<h2 id="坐标轴"><a href="#坐标轴" class="headerlink" title="坐标轴"></a>坐标轴</h2><blockquote>
<p>用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。<strong>注意+Y是向下的。</strong></p>
</blockquote>
<p><img src="images/zbz.png" alt="img"></p>
<h2 id="perspective透视"><a href="#perspective透视" class="headerlink" title="perspective透视"></a>perspective透视</h2><blockquote>
<p>电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，可以定义3D 元素距视图的距离，单位是px。</p>
<p>说白了，设置了perspective属性后，就有了进大远小的效果了，在视觉上，让我们能看出来3d的效果。</p>
<p>注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">perspective：<span class="number">500</span>px;</span><br></pre></td></tr></table></figure>

<p>关于近大远小</p>
<p><img src="images/per1.jpg" alt="img"></p>
<p><img src="images/per2.jpg" alt="img"></p>
<p>对于我们眼睛来说，离我们越近的房子，我们会感觉到这个房子越大，离我们越远的房子，就会感觉越小，其实房子的大小都是一样的，只是在视觉上的一种不同。</p>
<h2 id="rotate旋转-1"><a href="#rotate旋转-1" class="headerlink" title="rotate旋转"></a>rotate旋转</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">transform: rotate(<span class="number">45</span>deg);<span class="comment">// 让元素在平面2D中旋转</span></span><br><span class="line">transform: rotateX(<span class="number">45</span>deg);<span class="comment">// 让元素沿着X轴转45度</span></span><br><span class="line">transform: rotateY(<span class="number">45</span>deg);<span class="comment">// 让元素沿着Y轴转45度</span></span><br><span class="line">transform: rotateZ(<span class="number">45</span>deg);<span class="comment">// 让元素沿着Z轴转45度</span></span><br></pre></td></tr></table></figure>

<p>【01-3D转换-旋转.html】</p>
<p>问题：看不出来怎么转的，为什么现实生活中能够看出来？</p>
<h2 id="translate平移-1"><a href="#translate平移-1" class="headerlink" title="translate平移"></a>translate平移</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*沿着X轴的正方向移动45px*/</span></span><br><span class="line">transform: translateX(<span class="number">45</span>px);</span><br><span class="line"><span class="comment">/*沿着Y轴的正方向移动45px*/</span></span><br><span class="line">transform: translateY(<span class="number">45</span>px);</span><br><span class="line"><span class="comment">/*沿着Y轴的正方向移动45px*/</span></span><br><span class="line">transform: translateZ(<span class="number">45</span>px);</span><br></pre></td></tr></table></figure>

<p>【02-3D转换-平移.html】</p>
<p>【立方体.html】</p>
<h2 id="transform-style"><a href="#transform-style" class="headerlink" title="transform-style"></a>transform-style</h2><blockquote>
<p>transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性只能给父元素添加。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">flat:默认值，<span class="number">2</span>d显示</span><br><span class="line">preserve<span class="number">-3</span>d: <span class="number">3</span>d显示</span><br></pre></td></tr></table></figure>

<p>transform-style与perspective的区别</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*透视：透视只是相当于设置了一个距离，辅助我们查看3D效果的工具，*/</span></span><br><span class="line"><span class="comment">/*preserve-3d:给父盒子添加，让子元素保留3D的位置，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。 */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//一个3d元素可以没有perspective，但是不能没有transform-style</span></span><br></pre></td></tr></table></figure>

<p>【3d导航案例.html】</p>
<p>【切割轮播图案例】</p>
<p>【美女相册案例】</p>

      
      
        <div class="page-reward">
          <p><a href="javascript:void(0)" onclick="dashangToggle()" class="dashang">赏</a></p>
          <div class="hide_box"></div>
          <div class="shang_box">
            <a class="shang_close" href="javascript:void(0)" onclick="dashangToggle()">×</a>
            <div class="shang_tit">
              <p>纯属好玩</p>
            </div>
            <div class="shang_payimg">
              <img src="/img/alipayimg.jpg" alt="扫码支持" title="扫一扫" />
            </div>
              <div class="pay_explain">扫码打赏，你说多少就多少</div>
            <div class="shang_payselect">
              
                <div class="pay_item checked" data-id="alipay">
                  <span class="radiobox"></span>
                  <span class="pay_logo"><img src="/img/alipay.png" alt="支付宝" /></span>
                </div>
              
              
                <div class="pay_item" data-id="wechat">
                  <span class="radiobox"></span>
                  <span class="pay_logo"><img src="/img/weixin.png" alt="微信" /></span>
                </div>
              
            </div>
            <div class="shang_info">
              <p>打开<span id="shang_pay_txt">支付宝</span>扫一扫，即可进行扫码打赏哦</p>
            </div>
          </div>
        </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
        <script type="text/javascript">
          $(".pay_item").click(function(){
            $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
            var dataid=$(this).attr('data-id');
            $(".shang_payimg img").attr("src","/img/"+dataid+"img.jpg");
            $("#shang_pay_txt").text(dataid=="alipay"?"支付宝":"微信");
          });
          function dashangToggle(){
            
            $(".hide_box").fadeToggle();
            $(".shang_box").fadeToggle();
          }
        </script>
      
    </div>
    
  </div>
  
    
    <div class="copyright">
        <p><span>本文标题:</span><a href="/2020/05/19/CSS3/">CSS3</a></p>
        <p><span>文章作者:</span><a href="/" title="访问 程序猿 的个人博客">程序猿</a></p>
        <p><span>发布时间:</span>2020年05月19日 - 08时58分</p>
        <p><span>最后更新:</span>2020年05月19日 - 09时07分</p>
        <p>
            <span>原始链接:</span><a class="post-url" href="/2020/05/19/CSS3/" title="CSS3">http://yoursite.com/2020/05/19/CSS3/</a>
            <span class="copy-path" data-clipboard-text="原文: http://yoursite.com/2020/05/19/CSS3/　　作者: 程序猿" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
            <script src="/js/clipboard.min.js"></script>
            <script> var clipboard = new Clipboard('.copy-path'); </script>
        </p>
        <p>
            <span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license noopener" href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" target="_blank" title="中国大陆 (CC BY-NC-SA 3.0 CN)" target = "_blank">"署名-非商用-相同方式共享 3.0"</a> 转载请保留原文链接及作者。
        </p>
    </div>



<nav id="article-nav">
  
  
    <a href="/2020/01/05/VUE%E7%9B%B8%E5%85%B3/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-title">VUE相关</div>
      <strong class="article-nav-caption">></strong>
    </a>
  
</nav>

  
</article>

    <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#渐变"><span class="toc-number">1.</span> <span class="toc-text">渐变</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#线性渐变"><span class="toc-number">1.1.</span> <span class="toc-text">线性渐变</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#径向渐变"><span class="toc-number">1.2.</span> <span class="toc-text">径向渐变</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#过渡"><span class="toc-number">2.</span> <span class="toc-text">过渡</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#过渡的属性"><span class="toc-number">2.1.</span> <span class="toc-text">过渡的属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#属性合写"><span class="toc-number">2.2.</span> <span class="toc-text">属性合写</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2D转换"><span class="toc-number">3.</span> <span class="toc-text">2D转换</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#scale缩放"><span class="toc-number">3.1.</span> <span class="toc-text">scale缩放</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#translate平移"><span class="toc-number">3.2.</span> <span class="toc-text">translate平移</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#rotate旋转"><span class="toc-number">3.3.</span> <span class="toc-text">rotate旋转</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#skew斜切-变形"><span class="toc-number">3.4.</span> <span class="toc-text">skew斜切(变形)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#transform-origin转换原点"><span class="toc-number">3.5.</span> <span class="toc-text">transform-origin转换原点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#转换合写问题"><span class="toc-number">3.6.</span> <span class="toc-text">转换合写问题</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3D转换"><span class="toc-number">4.</span> <span class="toc-text">3D转换</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#坐标轴"><span class="toc-number">4.1.</span> <span class="toc-text">坐标轴</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#perspective透视"><span class="toc-number">4.2.</span> <span class="toc-text">perspective透视</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#rotate旋转-1"><span class="toc-number">4.3.</span> <span class="toc-text">rotate旋转</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#translate平移-1"><span class="toc-number">4.4.</span> <span class="toc-text">translate平移</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#transform-style"><span class="toc-number">4.5.</span> <span class="toc-text">transform-style</span></a></li></ol></li></ol>
</div>
<input type="button" id="tocButton" value="隐藏目录"  title="点击按钮隐藏或者显示文章目录">


<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>

<script>
    var valueHide = "隐藏目录";
    var valueShow = "显示目录";

    if ($(".left-col").is(":hidden")) {
        $("#tocButton").attr("value", valueShow);
    }
    $("#tocButton").click(function() {
        if ($("#toc").is(":hidden")) {
            $("#tocButton").attr("value", valueHide);
            $("#toc").slideDown(320);
        }
        else {
            $("#tocButton").attr("value", valueShow);
            $("#toc").slideUp(350);
        }
    })
    if ($(".toc").length < 1) {
        $("#toc, #tocButton").hide();
    }
</script>





<div class="bdsharebuttonbox">
	<a href="#" class="fx fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
	<a href="#" class="fx fa-weixin bds_weixin" data-cmd="weixin" title="分享到微信"></a>
	<a href="#" class="fx fa-qq bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
	<a href="#" class="fx fa-facebook-official bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
	<a href="#" class="fx fa-twitter bds_twi" data-cmd="twi" title="分享到Twitter"></a>
	<a href="#" class="fx fa-linkedin bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a>
	<a href="#" class="fx fa-files-o bds_copy" data-cmd="copy" title="分享到复制网址"></a>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>




    
        <section id="comments">
  <div id="disqus_thread"></div>
    <script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'swing'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" target="_blank" rel="noopener">comments powered by Disqus.</a></noscript>
</section>
    



    <div class="scroll" id="post-nav-button">
        
            <a href="/" title="回到主页"><i class="fa fa-home"></i></a>
        
        <a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>
        
            <a href="/2020/01/05/VUE%E7%9B%B8%E5%85%B3/" title="下一篇: VUE相关">
                <i class="fa fa-angle-right"></i>
            </a>
        
    </div>
    <ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2020/05/19/CSS3/">CSS3</a></li><li class="post-list-item"><a class="post-list-link" href="/2020/01/05/VUE%E7%9B%B8%E5%85%B3/">VUE相关</a></li><li class="post-list-item"><a class="post-list-link" href="/2019/12/05/es6%E7%9B%B8%E5%85%B3/">es6相关</a></li><li class="post-list-item"><a class="post-list-link" href="/2019/10/10/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/">移动端开发基础</a></li><li class="post-list-item"><a class="post-list-link" href="/2019/05/06/PHP%E7%9B%B8%E5%85%B3/">PHP相关</a></li><li class="post-list-item"><a class="post-list-link" href="/2019/03/10/git%E4%B8%8Egithub%E4%BD%BF%E7%94%A8/">git与github使用</a></li><li class="post-list-item"><a class="post-list-link" href="/2018/12/10/ajax/">ajax</a></li></ul>
    <script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
    <script>
        $(".post-list").addClass("toc-article");
        $(".post-list-item a").attr("target","_blank");
        $("#post-nav-button > a:nth-child(2)").click(function() {
            $(".fa-bars, .fa-times").toggle();
            $(".post-list").toggle(300);
            if ($(".toc").length > 0) {
                $("#toc, #tocButton").toggle(200, function() {
                    if ($(".switch-area").is(":visible")) {
                        $("#tocButton").attr("value", valueHide);
                        }
                    })
            }
            else {
            }
        })
    </script>



    <script>
        
    </script>
</div>
      <footer id="footer">
    <div class="outer">
        <div id="footer-info">
            <div class="footer-left">
                &copy; 2020 程序猿
            </div>
            <div class="footer-right">
                <a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="http://bestwing.me" target="_blank">Sw'blog</a> by Swing
            </div>
        </div>
        
            <div class="visit">
                
                    <span id="busuanzi_container_site_pv" style='display:none'>
                        <span id="site-visit" >海贼到访数: 
                            <span id="busuanzi_value_site_uv"></span>
                        </span>
                    </span>
                
                
                    <span>, </span>
                
                
                    <span id="busuanzi_container_page_pv" style='display:none'>
                        <span id="page-visit">本页阅读量: 
                            <span id="busuanzi_value_page_pv"></span>
                        </span>
                    </span>
                
            </div>
        
    </div>
</footer>

    </div>
    
<script src="https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>


<script src="/js/main.js"></script>


    <script>
        $(document).ready(function() {
            var backgroundnum = 24;
            var backgroundimg = "url(/background/bg-x.jpg)".replace(/x/gi, Math.ceil(Math.random() * backgroundnum));
            $("#mobile-nav").css({"background-image": backgroundimg,"background-size": "cover","background-position": "center"});
            $(".left-col").css({"background-image": backgroundimg,"background-size": "cover","background-position": "center"});
        })
    </script>





<div class="scroll" id="scroll">
    <a href="#"><i class="fa fa-arrow-up"></i></a>
    <a href="#comments"><i class="fa fa-comments-o"></i></a>
    <a href="#footer"><i class="fa fa-arrow-down"></i></a>
</div>
<script>
    $(document).ready(function() {
        if ($("#comments").length < 1) {
            $("#scroll > a:nth-child(2)").hide();
        };
    })
</script>

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

  <script language="javascript">
    $(function() {
        $("a[title]").each(function() {
            var a = $(this);
            var title = a.attr('title');
            if (title == undefined || title == "") return;
            a.data('title', title).removeAttr('title').hover(

            function() {
                var offset = a.offset();
                $("<div id=\"anchortitlecontainer\"></div>").appendTo($("body")).html(title).css({
                    top: offset.top - a.outerHeight() - 15,
                    left: offset.left + a.outerWidth()/2 + 1
                }).fadeIn(function() {
                    var pop = $(this);
                    setTimeout(function() {
                        pop.remove();
                    }, pop.text().length * 800);
                });
            }, function() {
                $("#anchortitlecontainer").remove();
            });
        });
    });
</script>


    <script type="text/javascript">
      window.onload = function(){
        document.getElementById("search").onclick = function(){
            console.log("search")
            search();
        }
      }
      function search(){
        (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
        (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
        e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
        })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');

        _st('install','A1Pz-LKMXbrzcFg2FWi6','2.0.0');
      }
    </script>

  </div>
</body>
</html>